前端知识点积累一
#vuex
***mapGetters和getters
#截取后端数据
#文字对齐
#文本溢出省略
- 文本溢出设置为省略一
- 文本溢出设置为省略二(多行)
- 文本溢出设置为省略三
#图片回显
file为二进制文件
#路径引用
****同一个文件夹中,
- 只要当其中一个组件直接属于该文件夹,跳一级,用 ./ 【图1】【图2】
- 当两个组件都分别属于各自的文件夹,共同属于某个总的文件,跳两级,用../ 【图3】
****不同文件夹且关系远,从同级文件夹名称开始写,用 @/ 【图4】
#类选择实现交互动效
#柱状图表数据排序
控制台获取的数据,console.log(this.totalData),重新设置了数据属性。
#echarts的使用
- 常用引用方式
在接口中调取echarts方法,在方法中引入时:
this.addChart = $echarts.init(this.$refs.addChart); //addChart为图表元素id this.addChart.setOption({});
- 基础echarts引用方法:
直接在接口中引入echarts时:
const myChart = echarts.init(document.getElementById(“oneone”)); //oneone为图表元素id
const option = {};
#POST请求的格式(特殊:与GET类似)
#values报错
当出现以上情况,
- 可能是数据与表现形式不一致,比如数据显示在选择框中,但选择框无数据。
可能是v-model命名出问题,不能这样命名,后端接口获取的值不能直接赋予进入,需要再转换以下。 a.正常命名
b.异常命名
#表格中添加选择框编辑
~1.这是加载页面时初始化设置想要的数据格式,定义authOptons数组,用到表格render中赋值。方便传 递数据给后端时数据信息整理,容易拿去数据,便于转化为后端想要的数据格式。
~2. 这 是 选 择 框 中 的 下 拉 选 择 项 , 在 data() 中 进 行 设 置 , 定 义 typeAuthOptionsMap 对 象 。
~3.根据表格中表头type,选择框中显示不同的选择项,一共有三组选择项,与type一一对应。
~4.render函数:在表格中创建选择框编辑功能
~5.传递给后端的数据格式,新定义一个对象。
#对象与对象数组拼接组合
新定义的对象数组与原始数据组合在一起
#forEach和push
- 使用forEach遍历数组对象
- 将遍历的数组中的需要是数据提取出来,重新生成一个数组用push
- 可单独提取数据信息
- 也可以重新定义一个对象数组
#map的使用
重新定义一个对象数组
#数据排序:降序或者升序
#同行多个元素中部分右对齐
#隐藏表格某列
~例子:隐藏勾选项
filter意为过滤,过滤某一列数据。
显示表格选择项不同状态
#分支合并,git提交到主分支上
#拖拽
#表格中标签
#模糊查询
remoteTableHb (query) {
// const [url, httpConfig] = [
// “/api/freeIPA/getHbaseProjectInfo”,
// {
// params: {
// table: query,
// },
// },
// ];
const [url, httpConfig] = [
- “/api/freeIPA/dataProjectList”,
- {
- params: {
- name: query,
- type: ‘’,
- // page: this.currentPageNum,
- // size: this.pageSize,
- },
- },
];
*this*.$http.get(url, httpConfig).then((response) => {
- if (response.data.code === 200) {
- console.log(response)
- *this*.list = response.data.result;
- }
});
- if (query !== ‘’) {
- *this*.loadingTableHb = true;
- setTimeout(() => {
- *this*.loadingTableHb = false;
- // const list = this.list.map(item => {
- // return {
- // value: item,
- // label: item
- // };
- // });
- const list = *this*.list.map(item => {
•
return {
•
value: item.name,
•
label: item.name
•
};
•
});
•
*this*.optionsTableHb = list
•
// this.optionsTableHb = list.filter(item => {
•
// console.log(‘显示’)
•
// console.log(item)
•
// item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
•
// });
•
// console.log(this.optionsTableHb)
•
}, 200);
- } else {
•
*this*.optionsTableHb = [];
- }
},
remoteTableHb (query) {
const [url, httpConfig] = [ “/api/freeIPA/dataProjectList”,
{
params: { name: query, type: ‘’,
},
},
];
this.$http.get(url, httpConfig).then((response) => { if (response.data.code === 200) {
console.log(response)
this.listTableHb = response.data.result;
}
});
if (query !== ‘’) { this.loadingTableHb = true; setTimeout(() => {
this.loadingTableHb = false;
const list = this.listTableHb.map(item => { return {
value: item.name, label: item.name
};
});
this.optionsTableHb = list
}, 200);
} else {
this.optionsTableHb = [];
}
},
remoteColumnHb (query) {
const table = this.list.table.toString() console.log(table)
const [url, httpConfig] = [ “/api/freeIPA/dataProjectList”,
{
params: { name: table, type: query,
},
},
];
this.$http.get(url, httpConfig).then((response) => { if (response.data.code === 200) {
console.log(response)
this.listColumnHb = response.data.result;
}
});
if (query !== ‘’) { this.loadingColumnHb = true; setTimeout(() => {
this.loadingColumnHb = false;
const list = this.listColumnHb.map(item => { return {
value: item.name, label: item.name
};
});
this.optionsColumnHb = list
}, 200);
} else {
this.optionsColumnHb = [];
}
},
#url路径直接跳转页面
- 初始化页面时,弹窗是没有参数的,此时需要自己定义弹窗的参数名。
在打开弹窗时定义参数。此时浏览器上会出现:
- 要直接从浏览器中输入url路径跳转,则需要在弹窗所在的vue页面初始化加载时判断设置。
- 如果要关闭弹窗,我则需要删除掉该参数,回到原来的大页面中,则需要在关闭弹窗时,重新设置 route中query的值。
#时间格式处理
// T和Z时间格式转换changeDate(oldDate) {
if(oldDate){
var dateee = new Date(oldDate).toJSON()
var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ‘ ‘).replace(/\.[\d]{3}Z/, ‘’)
return oldDate == ‘’ ? ‘’ : date
}
}
由A格式转为B格式
#render中自定义样式
#伪类:
排除掉scoped局部对全局的影响(子组件)。或者说时组件自带的类名的影响。用v-deep
学习链接是:深度作用选择器也可以用 /deep/.
~echarts相关
#echarts基本静态与动态图形显示
静态
- 在页面容器中写入,设置id
- 可能会在页面的script中引入特殊组件,引入特殊组件时,要npm i该组件。一般会在main.js中全局引入
- 在页面方法中引入,后写好图表的option,再setOption
或者直接在setOption中写
动态获取echarts
option写在data中,调取数据时只赋需要的数据给option
#echarts中X轴刻度对齐
#echarts页面初始化时图形变形解决方式
方法:异步请求,等原生echarts组件加载后,在异步请求方法,就避免了变形。
#echarts图形悬浮框定义
#echarts中设置X轴平行线为虚线,X轴样式也被覆盖解决方式
#echarts中柱状图颜色形状设置(左上右下)
#调整图表大小
~数据处理
#短横线转为驼峰
#删除对象中名称有短横线的数据
#对象转为自定义数组
#对象转为自定义对象
#屏幕自适应
echarts中pie图引导线为labelline
#设置滚动条
#开源依赖版本问题
-——-TypeError: Object(…) is not a function” found in
-———–报错中字段提示都是依赖包中字段,如clientHeight为开源代码中字段
重新安装对应版本
-–删除当前依赖
npm uninstall 安装包 (如:npm uninstall element-ui )
-—下载指定版本
npm install –save 包名称@版本号 (如: npm install –save element-ui@2.15.8 )




